<template>
  <ph-view>
    <ph-blockquote type="primary">该组件为独立组件<br/><a href="https://www.npmjs.com/package/ph-window" target="_blank">npm 地址</a></ph-blockquote>
    <ph-preview url="/window"/>
    <ph-tab>
      <ph-tab-panel title="窗口介绍">
        <ph-pretty>{{ Data.baseWindow }}</ph-pretty>
        <ph-button @click="open">打开窗口</ph-button>
        <ph-pretty>{{ Data.windowDemo }}</ph-pretty>
      </ph-tab-panel>
      <ph-tab-panel title="基本介绍">
        <ph-pretty>{{ Data.code }}</ph-pretty>
      </ph-tab-panel>
    </ph-tab>
    <ph-window
      title="测试窗体"
      :visible="visible"
      w="960px"
      h="600"
      @done="onDone"
      @close="onClose"
      @mask-click="onDone"
    >
      <template v-slot:side>
        <button class="ph-action">测试侧边</button>
        <button class="ph-action">测试侧边</button>
      </template>
      <p>阿斯利康减肥撒风</p>
      <p>阿斯利康减肥撒风</p>
      <p>阿斯利康减肥撒风</p>
      <p>阿斯利康减肥撒风</p>
      <p>阿斯利康减肥撒风</p>
      <p>阿斯利康减肥风</p>
      <template v-slot:action>this is footer</template>
    </ph-window>
  </ph-view>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import {
  PhButton,
  PhWindow,
  PhTab,
  PhTabPanel,
  PhView,
  PhBlockquote
} from "@/index";
import * as Data from "../data/window";
const visible = ref(false)
const open = ()=>{
  visible.value = true;
}
const onDone =()=> {
  visible.value = false;
}
const onClose =()=> {
  visible.value = false;
}
</script>
